<template>
	<div class="cont">
		<h2>Emails</h2>
		<p class="item" v-for="item in emails">
			<span class="detail">{{item.email}}</span>
			<span class="detail">{{item.name}}</span>
		</p>
	</div>
</template>

<script>
export default{
	name:'Emails',
	data(){
		return{
			emails:[
				{
					name:'Zoe',
					email:'zeo.lee@bigbig.com'
				},
				{
					name:'Timmy',
					email:'timmy.hu@bigbig.com'
				},{
					name:'Dick',
					email:'dick.teng@bigbig.com'
				},{
					name:'Billy',
					email:'billy.lee@bigbig.com'
				},{
					name:'Kitty',
					email:'kitty.wang@bigbig.com'
				}
			]
		}
	}
}
</script>

<style scoped>
	.cont{
		color:#98afc7;
		padding-left:20px; 
	}
	.item{
		border-bottom: 1px solid #98afc7;
		padding: 10px;
	}
	.detail{
		display: inline-block;
		border-right: 1px solid #98afc7;
		padding-right: 10px;
		width:200px;
	}
</style>